<template>
  <view class="sign-page">
    <view
      class="sign-box cover"
      :style="{ backgroundImage: `url(${ossImg('icons/sign/sign_bg.png')})` }"
    >
      <view
        class="sign-btn cover"
        :style="{ backgroundImage: `url(${ossImg('integral/sign_btn.png')})` }"
        @click.stop="toSign()"
        >{{ isSign === true ? "已签到" : "点我签到" }}</view
      >
      <view class="sign-days">
        <view class="sign-total pt-15px pb-18px text-18px leading-none">
          已连续签到<text class="text-24px">{{
            info.consecutiveDays || 0
          }}</text
          >天
        </view>
        <view class="days-line">
          <view
            class="day-point"
            v-for="day in 7"
            :key="day"
            :class="{ current: day === 7 }"
          >
            <view
              >+{{ [3, 4, 5, 6].includes(day) ? 3 : day === 7 ? 5 : 1 }}</view
            >
            <text class="day-label">{{ day }}天</text>
          </view>
        </view>
      </view>
      <view class="oreo">
        <text class="text-12px mb-11px block">已获得小饼干</text>
        <view class="flex items-center h-20px">
          <image
            class="w-22px h-20px mr-12px"
            :src="ossImg('icons/sign/oreo2.png')"
          />
          <text class="text-24px" @click.stop="toBiscuit">{{
            user?.memberScore?.surplusScore || 0
          }}</text>
        </view>
      </view>
      <view class="sign-action">
        <button @click.stop="signAction">签到规则</button>
        <button @click.stop="toSignLogs">奖励明细</button>
      </view>
    </view>
    <calendar
      :insert="true"
      :lunar="false"
      :showMonth="false"
      :selected="signDays"
    />
  </view>
  <!-- 签到成功popup -->
  <sign-popup v-if="visible.sign" @close="closeSign">
    <view class="w-235px h-159px bg-w mb-25px rounded-12px flex justify-center">
      <image
        class="w-150px h-120px block absolute"
        :src="ossImg('icons/sign/successfu.png')"
        style="transform: translate(0, -50%)"
      />
      <view class="leading-none pt-84px text-center">
        <view class="text-16px mb-10px font-bold" style="color: #eba065"
          >获得1小饼干</view
        >
        <text class="text-666 text-12px leading-none"
          >小饼干已发放至您的账户~</text
        >
      </view>
    </view>
  </sign-popup>
  <!-- 签到规则 -->
  <sign-popup v-if="visible.rule" @close="closeRule">
    <view
      class="cover w-316px h-248px mb-34px leading-none px-22px py-34px box-border"
      :style="{ backgroundImage: `url(${ossImg('icons/sign/rule_bg.png')})` }"
    >
      <view class="text-24px">签到规则</view>
      <view class="w-28px h-8px bg-primary mt-12px mb-15px"></view>
      <view class="text-14px leading-21px text-333">
        每日签到可获得1个小饼干；<br />
        连续签到第3-6天，每天可额外获得2个小饼干；<br />
        连续签到第7天，可额外获得4个小饼干<br />
        *连续签到7天为一个周期，若签到中断则重新 计算*
      </view>
    </view>
  </sign-popup>


</template>

<script setup>
import Calendar from "@/components/uni-calendar/uni-calendar";
import SignPopup from "@/components/sign-popup";
import { ossImg, dateTimeStr, message, debounce } from "@/utils/utils";
import { reactive, ref } from "vue";
import { signDetail, sign } from "@/services/integral";
import { onShow, onUnload, onHide } from "@dcloudio/uni-app";
import { Subscribe } from "@/services/utils";
import privacyPopup from "@/components/privacy-popup";

let enterTime = "";
let outTime = "";
let stayTime = "";

const visible = reactive({
  rule: false,
  sign: false,
});
const signDays = ref([
  // { date: '2022-08-11' },
  // { date: '2022-08-13' },
]);
const info = ref({});
const user = ref(getApp().globalData.user);
const isSign = ref(false);

const linkTo = (url) => uni.navigateTo({ url });

const signAction = () => {
  visible.rule = true;
  getApp().emdlz(
    "track",
    "event",
    "points_campaign_signin_page",
    "click",
    "sign_in_rule",
    ""
  );
};

const toSignLogs = () => {
  getApp().emdlz(
    "track",
    "event",
    "points_campaign_signin_page",
    "click",
    "award_detail",
    ""
  );

  linkTo("/integralPages/integral/signLogs");
};

const toBiscuit = () => {
  getApp().emdlz(
    "track",
    "event",
    "points_campaign_signin_page",
    "click",
    "biscuit_received",
    ""
  );

  linkTo("/personalPages/biscuit/biscuit");
};

const closeSign = () => {
  visible.sign = false;
  getApp().emdlz(
    "track",
    "event",
    "points_campaign_signin_page",
    "click",
    "signin_success_shut_down",
    ""
  );
};

const closeRule = () => {
  getApp().emdlz(
    "track",
    "event",
    "points_campaign_signin_page",
    "click",
    "sign_in_rule_shut_down",
    ""
  );

  visible.rule = false;
};

const getSignDetail = async () => {
  const res = await signDetail({ month: dateTimeStr("y-m") });
  if (res?.code === 200) {
    info.value = res.data;
    if (res.data.hasSignedInDates) {
      let list = [];
      for (const item of res.data.hasSignedInDates) {
        list.push({
          date: item,
        });
      }
      signDays.value = list;
      isSign.value = res.data.hasSignedInToday;
    }

    console.log(signDays.value);
  }
};

const toSign = () => {
  if (isSign.value === true) return;
  getApp().emdlz(
    "track",
    "event",
    "points_campaign_signin_page",
    "click",
    "sign_in",
    ""
  );
  uni.requestSubscribeMessage({
    tmplIds: [process.env.SIGNNOTICE],
    success: async (res2) => {
      console.log(res2);
      // 订阅成功
      await Subscribe({
        appId: process.env.WXAPPID,
        scene: ["SIGN_NOTIFY"],
      });
      const res = await sign();
      if (res?.code === 200) {
        visible.sign = true;
        isSign.value = true;
        getSignDetail();
        getApp()
          .getUserInfo()
          .then((res) => {
            user.value = res;
          });
      } else {
        message(res.message);
      }
    },
    fail: function (err) {
      console.log(err);
    },
  });
};

onShow(() => {
  console.log(dateTimeStr("y-m"));
  console.log(user.value);
  // 用户进入时间
  enterTime = new Date();
  getApp().accessLogAdd();
  getSignDetail();
});

onHide(() => {
  // 用户退出时间
  outTime = new Date();
  //停留时间(毫秒)
  stayTime = (outTime.getTime() - enterTime.getTime()) / 1000;

  getApp().emdlz(
    "track",
    "event",
    "points_campaign_signin_page",
    "view",
    "points_campaign_signin_page",
    stayTime
  );
});

onUnload(() => {
  // 用户退出时间
  outTime = new Date();
  //停留时间(毫秒)
  stayTime = (outTime.getTime() - enterTime.getTime()) / 1000;
  getApp().emdlz(
    "track",
    "event",
    "points_campaign_signin_page",
    "view",
    "points_campaign_signin_page",
    stayTime
  );
});
</script>

<style lang="less" scoped>
@import "@/static/css/theme.less";

.sign-total {
  color: #f3edb5;
  text-shadow: 0 0 8px #eee8c5, 0 0 4px #eee8c5;
}

.sign-box {
  width: 100%;
  height: 368px;
  background-size: calc(100% + 1px);
  box-sizing: border-box;
  padding-top: 38px;
  position: relative;

  .oreo {
    position: absolute;
    line-height: 1;
    top: 164px;
    right: 24px;
    color: white;
    text-align: right;

    text {
      color: #fdf6d1;
      text-shadow: 0 0 8px #efdc6a, 0 0 4px #efdc6a;
    }
  }

  .sign-action {
    position: absolute;
    top: 30px;
    right: 0;

    button {
      background-color: white;
      margin: 0 0 8px 0;
      width: 68px;
      height: 32px;
      line-height: 32px;
      color: #0058c9;
      padding: 0 7px 0 14px;
      font-size: 12px;
      font-weight: bold;
      white-space: nowrap;
      border-radius: 16px 0 0 16px;
    }
  }
}

.sign-page {
  width: 100%;
  min-height: 100vh;
  background-color: white;
}

.sign-btn {
  width: 153px;
  height: 153px;
  color: @primary-color;
  font-size: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 36px auto;
}

.sign-days {
  padding: 0 21px 56px 21px;
  box-sizing: border-box;
  background-color: rgba(41, 63, 195, 0.77);
}

.days-line {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  position: relative;

  &::after {
    content: "";
    width: 100%;
    height: 2px;
    background-color: white;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    z-index: 0;
  }

  .day-point {
    display: flex;
    align-items: center;
    justify-content: center;

    view {
      width: 24px;
      height: 24px;
      background: #ffffff;
      border: 1px solid #000000;
      border-radius: 24px;
      color: #111111;
      position: relative;
      font-size: 11px;
      font-weight: bold;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    text {
      font-weight: 400;
      position: absolute;
      color: white;
      font-size: 12px;
      line-height: 10px;
      bottom: -10px;
      transform: translate(0, 6px);
    }

    &.current {
      view {
        transform: scale(1.125);
        box-shadow: 0 0 4px white;
      }
    }
  }
}
</style>
